import React, { useEffect, useState } from 'react'
import "./home.css"
import axios from 'axios'
import { useSearchParams } from 'react-router-dom'
import {Button,Input} from 'antd'
export default function Zhifu() {
    let [url, setUrl] = useSearchParams()
    let id = url.get("id")
    let [data, setData] = useState([])
    let [money,setMoney] = useState()
    useEffect(() => {
        getuser(id)
    }, [])
    let getuser = async (id) => {
        let res = await axios.get("http://localhost:3000/getuser",{params:{id}})
        console.log(res.data.list);
        setData(res.data.list)
    }
    let pay = async() => {
        let obj = {
            orderId:new Date().toISOString().replace('T', ' ').replace(/\.\d+Z$/, ''),
            price:money,
            name:"赞赏",
        }
        let res = await axios.post("http://localhost:3000/zf/payment",obj)
        console.log(res.data.success)
        if (res.data.data.success) {
            console.log(res)
            // 打开支付宝的，支付页面
            window.location.href = res.data.data.paymentUrl
          }else{
            alert("支付失败")
          }
    }
    return (
        <div>
            <div className='header1'>
                <h1 style={{ lineHeight: "65px", marginLeft: "2%" }} onClick={() => window.history.go(-1)}>←</h1>
                <h2 style={{ lineHeight: "65px", marginLeft: "-8%" }}>赞赏</h2>
                <span style={{ marginTop: "20px" }}>&nbsp;&nbsp;&nbsp;</span>
            </div>
            {
                data.map(item => {
                    return <div>
                        <p style={{textAlign:"center",marginTop:"80px"}}><img src={item.avatar} alt='' width="60px" height="60px" style={{borderRadius:"50% 50%"}}></img></p>
                        <p style={{textAlign:"center"}}><h2>{item.username}</h2></p>
                    </div>
                })
            }
            <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gridGap:"40px",marginTop:"50px",marginLeft:"17px",width:"90%"}}>
                <Button type='primary' onClick={()=>setMoney(1)}>￥1</Button>
                <Button type='primary' onClick={()=>setMoney(5)}>￥5</Button>
                <Button type='primary' onClick={()=>setMoney(10)}>￥10</Button>
                <Button type='primary' onClick={()=>setMoney(20)}>￥20</Button>
                <Button type='primary' onClick={()=>setMoney(50)}>￥50</Button>
                <Input value={money} onChange={(e)=>setMoney(e.target.value)} placeholder='自定义金额'></Input>
            </div>
            <p style={{textAlign:"center",marginTop:"30px"}}><Button onClick={pay} type='primary'style={{width:"100px"}}>去支付</Button></p>
            <p style={{textAlign:"center",marginTop:"20px"}}>推荐使用支付宝支付</p>
        </div>
    )
}
